<template>
  <div class="dashboard-container">
    <!-- 主体内容 -->
    <div class="dashboard-content">
      <!-- 顶部标题 -->
      <div class="dashboard-header">
       
      </div>
      <!-- 左侧区域 -->
      <div class="left-section">
        <device-preview />
      </div>

      <!-- 右侧区域 -->
      <div class="right-section">
        <!-- 粉丝数据统计 -->
        <div class="stats-card">
          <!-- 快捷操作 -->
          <div class="quick-actions">
            <div class="action-item one">
              <span class="f18"
                >新建<br />
                文章</span
              >
            </div>
            <div class="action-item two">
              <span>新增<br />商品</span>
            </div>
          </div>
          <div class="quick-actions-right">
            <!-- 字体图标标题 -->
            <icon-title title="粉丝数据" :img-src="require('@/assets/home/admin/home/text_title.png')" />
            <div class="stats-content">
              <div class="stat-item" v-for="item in statsData" :key="item.id">
                <div class="stat-chart">
                  <div class="chart-bar-container">
                    <!-- 累计粉丝量使用柱状图 -->
                    <template v-if="item.id === 'total'">
                      <FansBar />
                    </template>
                    <!-- 其他使用折线图 -->
                    <template v-else>
                      <SmallLineChart
                        :chartData="item.chartData"
                        :lineColor="item.lineColor"
                        :showSymbol="true"
                      />
                    </template>
                  </div>
                </div>
                <div class="stat-value">
                  {{ item.value }}
                  <span
                    class="stat-change"
                    :class="{ red: item.changeType === 'negative' }"
                    :style="{ paddingLeft: item.id === 'total' ? '5px' : '0' }"
                  >
                    <i
                      class="iconfont"
                      :class="
                        item.changeType === 'negative'
                          ? 'icon-a-xiajiang2'
                          : 'icon-a-shangsheng2'
                      "
                    ></i>
                    {{ item.changeLabel }}
                  </span>
                </div>
                <div class="stat-label">{{ item.label }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 用户活跃图表 -->
        <div class="chart-content">
          <div class="chart-card">
            <icon-title title="用户活跃" :img-src="require('@/assets/home/admin/home/text_title.png')" />
            <LineChart
              :unit="'单位: 人'"
              :height="200"
              :initialVisiblePercent="50"
              :chartData="chartData"
            />
          </div>
          <div class="chart-card trend-chard">
            <icon-title title="消息通知" :img-src="require('@/assets/home/admin/home/text_title.png')" />
            <Notice />
          </div>
        </div>
      </div>
    </div>

    <!-- 历史文章和客服消息 -->
    <div class="bottom-section">
      <!-- 历史文章 -->
      <div class="article-card">
        <icon-title title="历史文章" :img-src="require('@/assets/home/admin/home/text_title.png')" />
        <div class="table-container">
          <el-table
            :data="tableData"
            style="width: 100%"
            max-height="200"
            :header-cell-style="getHeaderCellStyle"
          >
            <!-- 使用v-for动态渲染普通列 -->
            <el-table-column
              v-for="column in columns"
              :fixed="column.fixed"
              :key="column.prop"
              :prop="column.prop"
              :label="column.label"
              :width="column.width"
              :align="column.align"
            >
            </el-table-column>

            <!-- 单独处理操作列 -->
            <el-table-column
              label="操作"
              width="100"
              align="center"
              fixed="right"
              :render-header="renderNameHeader"
            >
              <template slot-scope="scope">
                <span style="color: #348cf8; cursor: pointer" class="f13 detail"
                  >查看详情</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 底部统计图表 -->
      <div class="bottom-charts">
        <!-- 用户性别比例 -->
        <div class="chart-card">
          <icon-title title="用户性别比例" :img-src="require('@/assets/home/admin/home/text_title.png')" />
          <DonutChart :chart-data="customData" />
        </div>
        <!-- 用户来源 -->
        <div class="chart-card">
          <icon-title title="用户来源" :img-src="require('@/assets/home/admin/home/text_title.png')" />
          <horizontal-bar-chart :chart-data="sourceData" :height="180" />
        </div>
      </div>

      <!-- 客服消息 -->
      <!-- <div class="customer-service">
        <div class="service-header">
          <img src="@/assets/template/none_avatar.png" alt="客服头像" />
          <div class="service-info">
            <div class="service-name">您好！我是您的专属客服小猪</div>
            <div class="service-id">ID: 05432</div>
          </div>
        </div>
        <div class="service-message">
          您可以随时告诉我您有什么需求，我会尽力为您提供帮助！
        </div>
      </div> -->
    </div>
    <kanban-girl-customer-service 
    />
  </div>
</template>

<script>
// 将原来的默认导入改为命名空间导入
import * as echarts from "echarts";
import { Field } from "vant";

export default {
  name: "home",
  data() {
    return {
      // 粉丝统计数据
      statsData: [
        {
          id: "total",
          value: "12,356",
          change: 125,
          changeType: "positive", // positive 或 negative
          changeLabel: "较上月 +125",
          label: "累计粉丝量",
          chartData: [],
          lineColor: "",
        },
        {
          id: "new",
          value: "56",
          change: 5,
          changeType: "positive",
          changeLabel: "较昨日 +5",
          label: "新增粉丝数",
          chartData: [10, 15, 12, 18, 20, 16, 19],
          lineColor: "#348CF8",
        },
        {
          id: "cancel",
          value: "12,356",
          change: -5,
          changeType: "negative",
          changeLabel: "较昨日 -5",
          label: "取消关注数",
          chartData: [10, 15, 12, 18, 20, 16, 19],
          lineColor: "#FA6756",
        },
      ],
      tableData: [
        {
          id: "3111",
          title: "(活动)XX企业全员10月一起飞-马拉松团建",
          views: 2714,
          shares: 221,
          collections: 993,
          comments: 11,
          author: "李四",
        },
        {
          id: "2001",
          title: '这个夏天让安全头盔"带"动我们的安全意识',
          views: 6939,
          shares: 704,
          collections: 382,
          comments: 1,
          author: "测试编辑端",
        },
        // {
        //   id: "1234",
        //   title: "如何快速提升企业员工的安全意识？这些方法值得收藏",
        //   views: 1327,
        //   shares: 186,
        //   collections: 843,
        //   comments: 95,
        //   author: "王五",
        // },
      ],
      // 定义表格列配置
      columns: [
        {
          prop: "id",
          fixed: true,
          label: "编号",
          width: "80",
          align: "left",
        },
        {
          prop: "title",
          fixed: false,
          label: "文章名称",
          width: "250",
          align: "left",
        },
        {
          prop: "views",
          fixed: false,
          label: "阅读量",
          width: "100",
          align: "left",
        },
        {
          prop: "shares",
          fixed: false,
          label: "转发量",
          width: "100",
          align: "left",
        },
        {
          prop: "collections",
          fixed: false,
          label: "收藏数",
          width: "100",
          align: "left",
        },
        {
          prop: "comments",
          fixed: false,
          label: "留言数",
          width: "100",
          align: "left",
        },
        {
          prop: "author",
          fixed: false,
          label: "发布人",
          width: "100",
          align: "left",
        },
      ],
      // 图表实例
      userActiveChart: null,
      genderChart: null,
      sourceChart: null,
      customData: [
        { name: "男", value: 580 },
        { name: "女", value: 320 },
      ],
      sourceData: [
        { name: "搜索名称", value: 46 },
        { name: "扫码二维码", value: 46 },
        { name: "好友推荐", value: 46 },
        { name: "其他", value: 46 },
      ],
      // 在 data 中添加图表数据（如果需要）
      chartData: [],
    };
  },
  computed: {
    // 为特定列生成表头样式
    getHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
      console.log(row, column, rowIndex, columnIndex);
      return {
        "background-color": "#E2EFFE", // 表头背景色
        color: "#323232", // 表头文字颜色
        "font-weight": "bold", // 文字加粗
        "font-size": "14px", // 文字大小
        "text-align": "left", // 文字居中
      };
    },
  },
  mounted() {},
  methods: {
    handleClearUnread() {
      this.unreadCount = 0
    },
    handleMessageSent(message) {
      console.log('发送消息:', message)
    },
    handleQuickAction(action) {
      console.log('快捷操作:', action)
      // 处理快捷操作逻辑
    },
    // 自定义列的表头样式
    renderNameHeader(h, { column, $index }) {
      return h(
        "div",
        {
          style: {
            textAlign: "center",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          },
        },
        [
          h("span", "操作"),
          // h('el-tooltip', {
          //   props: {
          //     content: '这是用户的姓名信息',
          //     placement: 'top'
          //   }
          // }, [
          //   h('i', {
          //     class: 'el-icon-question',
          //     style: 'margin-left: 5px; color: red;'
          //   })
          // ])
        ]
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  width: 100%;
  height: 100%;
  background-color: #fff;
  // padding: 20px;
  box-sizing: border-box;
}
// 设置表格列数据的字体大小
::v-deep .el-table__body {
  font-size: 13px; /* 设置表格内容字体大小 */
}

.dashboard-header {
  margin-bottom: 20px;
  position: absolute;
  h2 {
    font-size: 18px;
    color: #303133;
    font-weight: 600;
  }
}

.dashboard-content {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.left-section {
  width: 30%;
  background-color: #fff;
}

.right-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}


.quick-actions {
  display: flex;
  flex-direction: column;
  width: 240px;
}
.action-item.one {
  background-repeat: no-repeat;
  background-size: cover;
  color: #348cf8;
  background-image: url("@/assets/home/admin/home/article.png");
}
.action-item.two {
  background-repeat: no-repeat;
  background-size: cover;
  color: #eb7940;
  background-image: url("@/assets/home/admin/home/product.png");
  margin-top: 10px;
}
.action-item {
  flex: 1;
  background: white;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  cursor: pointer;
  span {
    padding-left: 20px;
    font-size: 22px;
  }
}
.stats-card {
  background-color: #fff;
  display: grid;
  grid-template-columns: 0fr 1fr;
  gap: 10px;
}
.stats-card h3 {
  grid-column: 1 / -1; // 标题跨越整个宽度
  font-size: 16px;
  color: #303133;
  font-weight: 600;
  margin-bottom: 20px;
  margin-top: 0;
}
.article-card {
  .table-container{
    margin-left: 10px;
    margin-right: 10px;
  }
}
.chart-content {
  display: flex;
  height: 100%;
  // display: grid;
  // grid-template-columns: 2fr 1fr;
  // gap: 10px;
}
.chart-card.trend-chard {
  width: 100%;
  margin-left: 10px;
}
.chart-card,
.article-card,
.customer-service {
  background: white;
  border-radius: 8px;
  // padding: 20px;
}

.stats-card h3,
.article-card h3 {
  font-size: 16px;
  color: #303133;
  font-weight: 600;
  margin-bottom: 20px;
}
.diamond-icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #409eff;
  transform: rotate(45deg);
  margin-right: 8px;
}
// 设置table表格的滚动条的宽度
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 2px;
  height: 10px;
}
// 设置table表格的滚动条的背景色和圆角
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: rgb(185, 183, 183);
  border-radius: 8px;
}
.detail:hover {
  color: #409eff; /* 鼠标悬停时文字变为主题蓝色 */
  text-decoration: underline; /* 添加下划线效果 */
  transition: all 0.3s ease; /* 添加平滑过渡效果 */
}

/* 保留其他样式不变 */
.custom-table th,
.custom-table td {
  font-size: 13px;
  color: #606266;
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  white-space: nowrap; /* 确保内容不换行 */
}

.custom-table th {
  background-color: #ecf5ff;
  font-weight: normal;
}

.custom-table tr:last-child td {
  border-bottom: none;
}

.custom-table th:last-child,
.custom-table td:last-child {
  border-right: none;
}

.custom-table tbody tr:hover {
  background-color: #f5f7fa;
}

.article-title-cell {
  min-width: 260px;
  white-space: normal;
  word-break: break-word;
}

.view-details {
  color: #409eff;
  text-decoration: none;
  font-size: 13px;
}

.view-details:hover {
  text-decoration: underline;
}
.stats-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 72px;
  grid-column: 1 / -1; // 内容跨越整个宽度
}

.stat-item {
  text-align: center;
  position: relative;
  .stat-chart {
    height: 60px;
    margin-bottom: 10px;
  }
  .chart-bar-container {
    height: 100%;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    justify-content: center;
  }
  .bar {
    width: 4px;
    background-color: #155bd4;
    border-radius: 2px;
  }
  .chart-line-container {
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  .chart-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #155bd4;
    border-radius: 1.5px;
    &.blue {
      background: linear-gradient(90deg, #155bd4, #6ba5f6);
    }
    &.red {
      background: linear-gradient(90deg, #ff4d4f, #ff7a7a);
    }
  }
  .stat-value {
    font-size: 24px;
    color: #303133;
    font-weight: 600;
    margin-bottom: 5px;
  }
  .stat-label {
    font-size: 13px;
    color: #606266;
    margin-bottom: 5px;
  }
  .stat-change {
    font-size: 12px;
    color: #1fcb43;
  }
  .stat-change.red {
    color: #fa6756;
  }
}

.bottom-charts {
  display: flex;
  flex: 1; // 占据与article-card相同的空间
  gap: 10px;
  box-sizing: border-box;
}

.bottom-charts .chart-card {
  flex: 1;
  max-height: 400px;
  box-sizing: border-box;
}

.bottom-section {
  display: flex;
  gap: 10px;
  height: 250px;
}

.article-card {
  flex: 1;
  width: 50%;
  box-sizing: border-box;
}

.article-list {
  max-height: 250px;
  overflow-y: auto;
}

.article-item {
  padding: 15px 0;
  border-bottom: 1px solid #f0f2f5;
  &:last-child {
    border-bottom: none;
  }
  .article-info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .article-id {
      font-size: 12px;
      color: #909399;
      margin-right: 10px;
      min-width: 60px;
    }
    .article-title {
      font-size: 14px;
      color: #303133;
      flex: 1;
    }
  }
  .article-stats {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: #909399;
    .article-action {
      color: #155bd4;
      cursor: pointer;
      margin-left: auto;
    }
  }
}

.customer-service {
  width: 350px;
  .service-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 15px;
    }
    .service-info {
      .service-name {
        font-size: 14px;
        color: #303133;
        margin-bottom: 5px;
      }
      .service-id {
        font-size: 12px;
        color: #909399;
      }
    }
  }
  .service-message {
    background-color: #f0f2f5;
    padding: 15px;
    border-radius: 8px;
    font-size: 14px;
    color: #606266;
    line-height: 1.6;
  }
}

// /* 滚动条样式 */
// .article-list::-webkit-scrollbar {
//   width: 6px;
// }

// .article-list::-webkit-scrollbar-track {
//   background: #f1f1f1;
//   border-radius: 3px;
// }

// .article-list::-webkit-scrollbar-thumb {
//   background: #c0c4cc;
//   border-radius: 3px;
// }

// .article-list::-webkit-scrollbar-thumb:hover {
//   background: #909399;
// }
</style>
